<template>
	<view>

		<view class="headInfo">

			<image class="imgLogo" src="../../static/Group 3148.png" mode=""></image>
			<view class="positionInfo ">
			   <view class="flex-bottom ">
			   	<image class="avater" src="../../static/avater.png" mode=""></image>
			   	
			   	<view class="desdescribe">
			   		<view style="color: aqua;font-size: 40rpx;margin-bottom: 10px;" > 张三饭点</view>
			   		<text>关注商家抖音号，获取更多惊喜></text>
			   	
			   	</view>
			   </view>
			</view>
		</view>
		
		<!-- 底部框 -->
		
		<view class="footerContaniner">
			<!-- 服务热线 -->
			<view class="flex-between borderBottom">
				<view >
					<view style="margin-bottom: 20rpx; color: black;font-weight: 700;">
						服务热线：200-4000-11110
					</view>
					<view style="color: #999;">
						营业时间:9:00-21:00
					</view>
				</view>
				<view class="flex-column">
					<image @click="callPhone('13037465405')" class="iphoneImg" src="../../static/close.png" mode=""></image>
					 <view style="margin-top: 10rpx;" >
					 	电话
					 </view>
				</view>
			</view>
			<view class="flex-between borderBottom">
				<view >
					<view style="margin-bottom: 20rpx; color: black;font-weight: 700;">
						湖北省 武汉市 光谷科技园
					</view>
					<view style="color: #999;">
						崇仁路C出口宝裕路1524号
					</view>
				</view>
				<view class="flex-column">
					<image @click='addressFn(tiem)' class="iphoneImg" src="../../static/close.png" mode=""></image>
					 <view style="margin-top: 10rpx;">
					 	导航
					 </view>
				</view>
			</view>
			<div class="positionMoney">
				<image style="margin-top: 30rpx; width: 100%;" src="../../static/22 52.png" mode="widthFix"></image>
				<text class="money">￥12</text>
			</div>
			
			<view class="">
				<view style="font-size: 40rpx;font-weight: 700; margin: 10rpx 0;">
					活动规则
				</view>
				1.点击上方”立即转发视频”按钮</br>
				2.将商家的视频作品转发到你的抖音账号上</br>
				3.转发成功后48小时不删除即可完成任务 </br>
				4.完成任务即可获得12元现金返现原路返回

			</view>
		</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				indexMainData: {
					loginBackgroundImg: 0
				},
				backgrounds: require('../../static/Group 3148.png'),
				tiem:{
					latitude:90,
					longitude:90
				}
			}
		},
		onLoad() {
            // 拨打技师电话
       
		},
		methods: {
              callPhone(phone) {
            	this.$sun.phone(phone)
            },
			
			async addressFn(tiem) {
				console.log(JSON.stringify(tiem) + '导航========================')
				//纬度
				var latitude = parseFloat(tiem.latitude);
				//经度
				var longitude = parseFloat(tiem.longitude);
				// 百度地图经纬度转腾讯地图经纬度
				var x_pi = 3.14159265358979324;
				var x = parseFloat(tiem.latitude) - 0.0065;
				var y = parseFloat(tiem.longitude) - 0.006;
				var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
				var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
				var lat = (z * Math.cos(theta)).toFixed(7);
				var lng = (z * Math.sin(theta)).toFixed(7);
				//定位地方名称
				var name = tiem.store_name;
				const map = await this.$sun.openLocation({
					//拿到上面的计算好的（百度经纬度转腾讯经纬度）经纬度 进行一个赋值
					lat: lat,
					lng: lng,
					name: tiem.city, //名称
					address: tiem.address, //地址
					key: wx.getStorageSync('system').tencentMapKey ? wx.getStorageSync('system')
						.tencentMapKey : 'SFABZ-WANWW-FISRY-3IGTF-HV7RE-YSFTI' //腾讯key
				});
			},
		}
	}
</script>

<style lang="less">
	page {
		background-color: #fff;
	}
     .footerContaniner{
		 background-color: #fff;
		 height: 124px;
		 transform: translateY(-30px);
		border-radius: 20px;
		padding: 10px;
		.borderBottom{
			padding: 20rpx 0;
			border-bottom: 2px solid #F2F2F2 ;
		}
		.iphoneImg{
			width: 82rpx;
			height: 82rpx;
		}
		 
	 }
	 .positionMoney{
		 position: relative;
		 .money{
			 position: absolute;
			 top:110rpx;
			 left:60rpx;
			 font-size: 50rpx;
			 font-weight: 700;
			 color: yellow;
			 
		 }
	 }
	.headInfo {
		position: relative;

		.imgLogo {
			width: 100%;
		}

		.positionInfo {
			position: absolute;
			top: 200rpx;
			left: 30rpx;
            z-index: 9999999999999;
			.avater{
				width: 180rpx;
				height: 180rpx;
			}
			.desdescribe{
            margin-left: 20rpx;
				color: red;
	
				font-size: 28rpx;

			}
		}

	}

	.login-technician {
		min-height: 100vh;

		box-sizing: border-box;
		padding: 20px;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		justify-content: center;
		//   background-image: url('/src/assets/images/anmoBackground_01.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		//   background-size: contain;
		position: relative;

	}

	.desdescribe {}
</style>